<template>
  <div style="cursor: pointer">
    <div class="title" :title="title">{{ title }}</div>
    <a-progress
      type="line"
      stroke-linecap="square"
      class="rate"
      :class="type"
      :percent="value"
      :style="{ color: slipperColor }"
      v-bind="$attrs"
    >
      <template #format>
        <div class="rate-percent">
          {{ text }}<span style="font-size: 12px">{{ suffix }}</span>
        </div>
      </template>
    </a-progress>
  </div>
</template>

<script>
export default {
  name: 'line-rate',
  props: {
    /* type: thin-line / bold-line /slipper */
    type: { type: String, default: 'thin-line slipper' },
    title: { type: String, default: '' },
    text: { type: [String, Number], default: '' },
    suffix: { type: String, default: '' },
    percent: { type: [String, Number], default: 0 },
    slipperColor: { type: String, default: '#5662d8' },
  },
  computed: {
    value() {
      return Number(this.percent);
    },
  },
};
</script>

<style scoped lang="less">
.title {
  max-width: 60%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  color: rgba(255, 255, 255, 0.6);
  text-align: left;
}
.rate {
  position: relative;
  .rate-percent {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: rgba(255, 255, 255, 1);
  }
  &.ant-progress {
    line-height: 1;
    /deep/.ant-progress-outer {
      margin-right: 0;
      padding-right: 0;
      color: inherit;
      .ant-progress-inner {
        border-radius: 0 7px 7px 0;
        color: inherit;
        .ant-progress-success-bg,
        .ant-progress-bg {
          position: relative;
          z-index: 2;
          height: 14px !important;
          background-color: transparent;
          color: inherit;
        }
      }
    }
    /deep/.ant-progress-text {
      position: absolute;
      bottom: 100%;
      right: 0;
      width: auto;
      text-align: right;
    }
  }

  &.slipper {
    &.ant-progress {
      /deep/.ant-progress-outer {
        .ant-progress-inner {
          .ant-progress-success-bg,
          .ant-progress-bg {
            border-radius: 0;
            &:after {
              content: '';
              position: absolute;
              z-index: 3;
              top: 0;
              bottom: 0;
              right: 0;
              display: block;
              width: 4px;
              margin: auto;
              background: currentColor;
            }
          }
        }
      }
    }
  }
  &.thin-line {
    &.ant-progress {
      /deep/.ant-progress-outer {
        .ant-progress-inner {
          background: transparent;
          border-radius: 0;
          &:before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: block;
            height: 2px;
            margin: auto;
            background: #313a42;
          }
        }
      }
    }
  }
  &.bold-line {
    &.ant-progress {
      /deep/.ant-progress-outer {
        .ant-progress-inner {
          background: linear-gradient(90deg, rgba(45, 58, 68, 0.1) 0%, rgba(45, 58, 68, 1) 100%);
          .ant-progress-bg {
            border-radius: 0 7px 7px 0 !important;
          }
        }
      }
    }
  }
}
</style>
